<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>case1 mbg + border</title>
<style>
@import url(../../README.css);
html {
  color: whitesmoke; background-color: #222;
  margin: 0.5em 2em; line-height: 1.5;
}
.view { padding: 20px; }
.bg {
  -uu-box-shadow: white 1px 1px 20px;
  -uu-background: url(../../img/grid1.gif) repeat-y 32px 0,
              url(../../img/grid1.gif) repeat-y 96px 0,
              url(../../img/grid1.gif) repeat-y 160px 0,
              url(../../img/grad2.png) repeat-x left top,
              url(../../img/grad1.png) skyblue repeat-x left bottom;
}
.bg2 {
  -uu-box-shadow: white 1px 1px 20px;
  -uu-background: url(../../img/grid1.gif) repeat-y 32px 100%,
              url(../../img/grid1.gif) repeat-y 96px 100%,
              url(../../img/grid1.gif) repeat-y 160px 100%,
              url(../../img/grad2.png) repeat-x left top,
              url(../../img/grad1.png) skyblue repeat-x left bottom;

}
.radius {
  -uu-border-radius: 40px;
}
.border {
  border: 10px solid black;
}
.bordertop {
  border-top: 2px solid white;
}

</style>
<script>
window.UUMETA_DEBUG = 1;
window.UUMETA_IMAGE_DIR = "../../img";
</script>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script src="../../uuAltCSS.js"></script>
</head><body>

<h2>border: 0px none</h2>

  <div class="view">
    <div class="bg">
      <pre>
        <img class="alpha" src="../../img/o32.png" />
        <img class="alpha" src="../../img/f32.png" />
        <img class="alpha" src="../../img/i32.png" />
        <img class="alpha" src="../../img/s32.png" />
        <img class="alpha" src="../../img/c32.png" />
      </pre>
    </div>
  </div>

<h2>border: 10px solid black</h2>
  <p>IE6, IE7 では 4辺のボーダーの幅が同じで、-uu-border-radius: が 0px または指定されていない場合のみ、
     ボーダー境界で背景画像のクリッピングを行います。</p>
  <div class="view">
    <div class="bg border">
      <pre>
        <img class="alpha" src="../../img/o32.png" />
        <img class="alpha" src="../../img/f32.png" />
        <img class="alpha" src="../../img/i32.png" />
        <img class="alpha" src="../../img/s32.png" />
        <img class="alpha" src="../../img/c32.png" />
      </pre>
    </div>
  </div>

<h3>border: 10px solid black; -uu-border-radius: 40px</h3>
  <p>-uu-border-radius: 40px が指定されているため、ボーダー境界でクリッピングを行いません。</p>
  <div class="view">
    <div class="bg border radius">
      <pre>
        <img class="alpha" src="../../img/o32.png" />
        <img class="alpha" src="../../img/f32.png" />
        <img class="alpha" src="../../img/i32.png" />
        <img class="alpha" src="../../img/s32.png" />
        <img class="alpha" src="../../img/c32.png" />
      </pre>
    </div>
  </div>

<h2>border: 10px solid black; border-top: 2px solid white</h2>
  <p>IE6, IE7 では背景画像のクリッピングが行われないため(制限事項)、
     ボーダー領域に背景画像が重なった状態でレンダリングされます</p>

  <div class="view">
    <div class="bg2 border bordertop">
      <pre>
        <img class="alpha" src="../../img/o32.png" />
        <img class="alpha" src="../../img/f32.png" />
        <img class="alpha" src="../../img/i32.png" />
        <img class="alpha" src="../../img/s32.png" />
        <img class="alpha" src="../../img/c32.png" />
      </pre>
    </div>
  </div>

</body></html>
